<template>
    <fieldset>
        <legend>product1</legend>
        <h2>{{$store.state.product.name}}</h2>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>商品:{{item.title}}</b>
                &nbsp;
                <b>单价:{{item.price}}</b>
                &nbsp;
                <b>库存:{{item.inventory}}</b>
                &nbsp;
                <button :disabled="item.inventory==0" @click="add(item)">加入购物车</button>
            </li> 
        </ul>
    </fieldset>
</template>
<script>
import { mapActions,mapMutations,mapState } from 'vuex';
    export default {

        mounted(){
            this.FETCH_PRODUCT()
        },
        methods:{
        ...mapActions('product1',['FETCH_PRODUCT']),
        ...mapMutations('cart1',['SET_CART']),
        ...mapMutations('product1',['DECREASE_INVENTORY']),
        ...mapActions('cart1',['ADD_TO_CART']),
        add(item){
            // this.SET_CART(item)
            // this.DECREASE_INVENTORY(item)
            this.ADD_TO_CART(item)
        }
        },
        computed:{
            ...mapState('product1',['products'])
        }
    }
</script>